<template>
	<div class="doc_pc_components_ScrollArea">
		<div>
			<div class="doc-config">
				<Radio
					v-model="dir"
					label="纵向"
					name="y"
				/>
				<Radio
					v-model="dir"
					label="横向"
					name="x"
				/>
				动画时长<NumberInput
					v-model="duration"
					:step="200"
					:min="0"
					:max="5000"
					class="doc-input"
				/>
				<Button @click="clickFn(0)">滚动到顶</Button>
				<Button @click="clickFn(1)">滚动到底</Button>
			</div>
		</div>
		<div>
			<ScrollArea
				ref="scrollArea"
				v-slot="data"
				class="doc-ScrollArea"
			>
				<div class="doc-content">
					<div style="white-space:pre-wrap">{{data}}</div>
					<div
						v-for="i in 40"
						v-once
						:key="i"
					>第{{i}}行,这是一段测试内容这是一段测试内容这是一段测试内容!......</div>
				</div>
			</ScrollArea>
		</div>
		<div>
			<ScrollArea
				visible
				class="doc-ScrollArea"
				:x-bar-style="xBarStyle"
				:x-thumb-style="xThumbStyle"
				:y-bar-style="yBarStyle"
				:y-thumb-style="yThumbStyle"
				@scroll="scrollFn"
			>
				<div class="doc-content">
					<div
						v-for="i in 40"
						v-once
						:key="i"
					>第{{i}}行,这是一段测试内容这是一段测试内容这是一段测试内容!......</div>
				</div>
			</ScrollArea>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {ScrollArea,NumberInput,Button,Radio} from 'powerful-ui/pc-default';

const dir=shallowRef('y');
const duration=shallowRef(1000);
const scrollArea=shallowRef(null);
function clickFn(percentage){
	scrollArea.value.setScrollPercentage(dir.value,percentage,duration.value/1000);
}

const xBarStyle={
	backgroundColor:'#cb0f34',
	opacity:0.2,
	bottom:'0',
	borderRadius:'9px',
	height:'9px',
};
const xThumbStyle={
	background:'#cb0f34',
	opacity:0.75,
	bottom:'2px',
	borderRadius:'5px',
	height:'5px',
};
const yBarStyle={
	backgroundColor:'#027be3',
	opacity:0.2,
	right:'0',
	borderRadius:'9px',
	width:'9px',
};
const yThumbStyle={
	background:'#027be3',
	opacity:0.75,
	right:'2px',
	borderRadius:'5px',
	width:'5px',
};
function scrollFn(data){
	console.log('滚动',data);
}
</script>

<style lang="scss">
.doc_pc_components_ScrollArea{
	>div{
		margin:20px;
	}
	.doc-input{
		width:80px;
	}
	.doc-ScrollArea{
		margin:20px 0;
		width:250px;
		height:260px;
	}
	.doc-content{
		white-space:nowrap;
	}
	.doc-config{
		display:flex;
		align-items:center;
		margin-bottom:10px;
		>div{
			margin:0 5px;
		}
	}
}
</style>